<template>
  <div>
    <div class="display-flex">
      <div class="menu-wrapper" ref="wrapper" >
        <ul class="content">
          <li v-for="(item,index) in model" :key="index" class="text-center" :class="{active:index === currentIndex}" @click="clickMenuItem(index)" >
          <span class="menu-name pt-4 pb-4 font-s">
            <img :src="item.icon" alt="" v-if="item.icon" style="width: 13px;height: 13px;margin-top: -5px;">
            {{item.name}}
          </span>
          </li>
        </ul>
      </div>
      <div ref="wapper1" class="food-list flex-1">
        <ul ref="foodsUl">
          <li v-for="(item,n) in model" :key="n" class="food-items">
            <div>
              <div class="food-title">{{item.name}}</div>
              <ul>
                <li v-for="(food,n) in item.foods" :key="n" class="food-item" @click="getFoodInfo(food)">
                  <div class="display-flex food-box">
                    <img :src="food.icon" alt="" width="57px" height="57px">
                    <div class="flex-1 pl-3">
                      <p class="name">{{food.name}}</p>
                      <p class="grey-4 font-xss mt-1">{{food.description}}</p>
                      <div class="grey-4 display-flex font-xss mt-1">
                        <p>{{`月售${food.sellCount}`}}</p>
                        <p class="pl-4">{{`好评率${food.rating}`}}</p>
                      </div>
                      <div class="display-flex jc-between ai-center" style="margin-top: -10px;">
                        <div class="display-flex ai-center">
                          <p class="font-xm red-1">{{`￥${food.price}`}}</p>
                          <p class="grey-1 font-s pl-2" style="text-decoration: line-through" v-if="food.oldPrice">{{`￥${food.oldPrice}`}}</p>
                        </div>
                        <CartControl :food="food"/>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <ShopCart/>
    <Food :foodInfo="food" ref="food" />

  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import CartControl from "../../../components/CartControl/CartControl";
  import Food from "../../../components/Food/Food";
  import ShopCart from "../../../components/ShopCart/ShopCart";
  import {RECEIVE_SHOPGOODS} from '../../../store/mutation-types'

  export default {
    name: "ShopGoods",
    components:{
      CartControl,
      Food,
      ShopCart
    },
    data(){
      return {
        model:{},
        scrollY:0, //右侧滑动的Y轴坐标（滑动过程实时变化）
        tops:[], //所有右侧分类li的top组成的数组（列表第一次显示后就不再变化）
        food:{},  //需要显示的food
      }
    },
    computed:{
      //计算得到当前分类的下标
      currentIndex(){
        //得到条件数据
        const {scrollY,tops} = this
        //根据条件计算产生一个结果
        //当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
        // 如果没有符合条件的元素返回 -1
        // 查找函数有三个参数。
        // value：每一次迭代查找的数组元素。
        // index：每一次迭代查找的数组元素索引。
        // arr：被查找的数组。
        const index = tops.findIndex((top,index)=>{
          //scrollY>=当前top &&  scrollY<下一个top
          return scrollY >= top && scrollY <tops[index+1]
        })
        // 返回结果
        return index
      }
    },
    methods:{
      async getGoodsData(){
        const res = await this.$http.get('/goods')
        this.$store.commit(RECEIVE_SHOPGOODS,res.data)
        this.model = this.$store.state.shopGoods
        //列表数据更新显示后执行
        this.$nextTick(()=>{
          this._initScroll()
          this._initTops()

        })
      },
      _initScroll(){
        new BScroll(this.$refs.wrapper,{
          click:true
        })
        this.foodsScroll = new BScroll(this.$refs.wapper1,{
          click:true,
          probeType:2 //因为惯性滑动不会触发
        })
        //给右侧列表绑定scroll 监听
        this.foodsScroll.on('scroll',(event)=>{
          this.scrollY = -event.y

        })
        //给右侧列表绑定scroll 结束的监听
        this.foodsScroll.on('scrollEnd',(event)=>{
          this.scrollY = -event.y
        })
      },
      _initTops(){
        //1.初始化tops
        let tops = []
        let top = 0
        tops.push(top)
        //2.收集
        //找到所有分类的li
          const lis = this.$refs.foodsUl.getElementsByClassName('food-items')
          // Array.prototype.slice.call(arguments)能将具有length属性的对象(key值为数字)转成数组
          // call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象
          // call的thi指向lis
          // slice() 方法可从已有的数组中返回选定的元素。
          // Array.prototype.slice.call()可以理解为：改变数组的slice方法的作用域，在特定作用域中去调用slice方法，call（）方法的第二个参数表示传递给slice的参数即截取数组的起始位置。
          Array.prototype.slice.call(lis,0).forEach(li=>{
            //可以理解为元素可视区域高度
            top += li.clientHeight
            tops.push(top)
          })
        //3.更新状态
        this.tops = tops
      },
      clickMenuItem(index){
        // 使 右侧列表滑动到对应的位置
        this.foodsScroll.scrollTo(0,-this.tops[index])
      },
      getFoodInfo(info){
        this.food = info
        this.$refs.food.toggleShow()
      }
    },
    mounted() {
      this.getGoodsData()
    },
  }
</script>

<style lang="scss" scoped>
.menu-wrapper{
  width:80px;
  background-color: #f3f5f7;
  height: calc(100vh - 150px - 38px - 48px);
  overflow: hidden;
  .menu-name{
    display: inline-block;
    position: relative;
    &::after{
      position: absolute;
      content: '';
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
      background-color: rgba(7,17,27,0.1);
    }
  }
  .active{
    background-color: #fff;
    border: none;
    color: #02a774;
  }
}
  .food-list{
    height: calc(100vh - 150px - 38px - 48px);
    overflow: hidden;
    background-color: #fff;
    .food-title{
      background-color: #f3f5f7;
      font-size: 12px;
      padding-left: 12px;
      line-height: 26px;
      color: #93999f;
      border-left: 2px solid #d9dde1;
    }
    .food-item{
      .food-box{
        position: relative;
        padding: 16px 25px 10px 17px;
        &::after{
          content: '';
          position: absolute;
          bottom: 0;
          width: 90%;
          height: 1px;
          background-color: rgba(7,17,27,0.1);
          transform: scaleY(0.5);
        }
      }
      .name{
        color: #07111b;
        font-size: 14px;
      }
    }
  }
</style>
